<template>
    <div class="person">
        <h2>姓名：{{ person.name }}</h2>
        <h2>年龄：{{ person.age }}</h2>
        <h2>汽车：{{ person.cars.car1 }} {{ person.cars.car2 }}</h2>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="changeCar1">修改第一台车</button>
        <button @click="changeCar2">修改第二台车</button>
        <button @click="changeCars">修改整个车</button>
    </div>
</template>

<script lang="ts" setup name="Person">
    import { reactive, watch } from 'vue';

    let person = reactive({
        name: '张三',
        age: 18,
        cars: {
            car1: '小米',
            car2: '极氪',
        },
    });

    function changeName() {
        person.name += '~';
    }
    function changeAge() {
        person.age += 1;
    }
    function changeCar1() {
        person.cars.car1 = '比亚迪';
    }
    function changeCar2() {
        person.cars.car2 = '路特斯';
    }
    function changeCars() {
        person.cars = {
            car1: '奥迪',
            car2: '宝马',
        };
    }

    // 情况五：监视多种数据
    watch([() => person.name, () => person.cars], (newValue, oldValue) => {
        console.log('name发生变化了', newValue, oldValue);
    });
</script>

<style scoped>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding:20px
    }
    button {
        margin: 0 5px;
    }
</style>